<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容(最多吐槽120字)" maxlength="120" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="item.goods_id">
                <div class="cmt-title">
                    第{{ i+1 }}楼&nbsp;&nbsp;用户:{{ item.store_name }}&nbsp;&nbsp;发表时间:{{ 1990 + i }}-12-12 12:12:12
                </div>
                <div class="cmt-body">
                    {{item.goods_name}}
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script type="text/ecmascript-6">

    import { Toast } from 'mint-ui'

    export default {
        name: 'Comments',
        data() {
            return {
                pageIndex: 1,
                comments: [],//获取所有的评论数据
                msg: '',//评论输入的内容
            }
        },
        created() {
            this.getComments();
        },
        methods: {

            getComments() {//获取评论

                var pushData = {
                    barcode : ' ',
                    gc_id : '1985',
                    curpage : this.pageIndex, //默认展示第一页数据
                    b_id : ' ',
                    keyword : ' ',
                    order : '2',
                    key : '1',
                    gc_child_id : '',
                    store_id : this.storeId
                }

                //获取新闻列表
                this.$http.post('mobile/index.php?act=goods&op=goods_list',pushData).then(result=> {

                    console.log(result)
                if(result.body.code == 200){
                    //如果没有失败,应该把数据保存到 data 上
                    //this.comments = result.body.datas
                    //每当获取新评论数据的时候,不要把老数据清空覆盖,而是应该以老数据,拼接上新数据
                    this.comments = this.comments.concat(result.body.datas)

                    Toast('获取评论成功!')

                } else {

                    Toast('获取评论失败!')

                }
            });
            },
            getMore() {//加载更多

                this.pageIndex++;
                this.getComments();
            },
            postComment() {

                //校验是否为空内容
                if (this.msg.trim().length === 0) {
                    return Toast("评论内容不能为空!")
                }



                //1.拼接出一个评论对象
                var cmt = {
                    store_name: "匿名对象",
                    add_time: Date.now(),
                    goods_name: this.msg.trim()
                };

                this.comments.unshift(cmt);
                this.msg = "";




                //发表评论
                //参数1: 请求的url地址
                //参数2: 提交给服务器的数据对象 { content: this,msg }
                //参数3: 定义提交时候,表单中数据的格式 { emulateJSON: true }
                
//                this.$http.post("api/postcomment/"+this.$route.param.goodsId,{
//                    content: this.msg.trim()
//                }).then(function () {
//                    if (result.body.status === 0) {
//                        //1.拼接出一个评论对象
//                        var cmt = {
//                            user_name: "匿名对象",
//                            add_time: Date.now(),
//                            content: this.msg.trim()
//                        };
//
//                        this.comments.unshift(cmt);
//                        this.msg = "";
//                    }
//                })

            },
        },
        props: ['storeId'],
    }
</script>


<style  lang="scss" scoped rel="stylesheet/scss">

    .cmt-container {
        h3{
            font-size: 18px;
        }

        textarea {
            font-size: 14px;
            height:85px;
            margin:0;
        }

        .cmt-list {
            margin: 5px 0;

            .cmt-item {

                font-size: 13px;

                .cmt-title {
                    line-height: 30px;
                    background-color: #9d9d9d;
                }

                .cmt-body {
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
    }

</style>